/**
 * AnimatedBottomModal 组件演示
 * 
 * 演示场景：
 * 1. 基础模态框 - 简单的内容展示
 * 2. 表单模态框 - 带输入框的表单
 * 3. 列表选择器 - 选项列表
 * 4. 自定义样式 - 自定义动画和样式
 * 5. 禁用手势 - 只能通过按钮关闭
 */

import React, {useState, useRef} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  ScrollView,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import {AnimatedBottomModal, AnimatedBottomModalRef} from './components/AnimatedBottomModal';

// ==================== 类型定义 ====================

type ModalType = 'basic' | 'form' | 'list' | 'custom' | 'noGesture' | 'refControl' | null;

interface ListItem {
  id: string;
  title: string;
  icon: string;
}

// ==================== 主组件 ====================

export const TestModalAnimated: React.FC = () => {
  // ==================== 状态管理 ====================
  
  const [activeModal, setActiveModal] = useState<ModalType>(null);
  const [formText, setFormText] = useState('');
  const [selectedItem, setSelectedItem] = useState<string>('');
  const modalRef = useRef<AnimatedBottomModalRef>(null);

  // 列表数据
  const listItems: ListItem[] = [
    {id: '1', title: '拍照', icon: '📷'},
    {id: '2', title: '从相册选择', icon: '🖼️'},
    {id: '3', title: '选择文件', icon: '📁'},
    {id: '4', title: '录音', icon: '🎤'},
    {id: '5', title: '位置', icon: '📍'},
  ];

  // ==================== 事件处理 ====================
  
  const openModal = (type: ModalType) => {
    if (type === 'refControl') {
      modalRef.current?.show();
    }
    setActiveModal(type);
  };

  const closeModal = () => {
    if (activeModal === 'refControl') {
      modalRef.current?.hide();
    }
    setActiveModal(null);
  };

  const handleFormSubmit = () => {
    console.log('表单提交:', formText);
    setFormText('');
    closeModal();
  };

  const handleItemSelect = (item: ListItem) => {
    setSelectedItem(item.title);
    closeModal();
  };

  // ==================== 渲染函数 ====================
  
  // 渲染按钮
  const renderButton = (title: string, type: ModalType, description: string) => (
    <TouchableOpacity
      style={styles.demoButton}
      onPress={() => openModal(type)}
      activeOpacity={0.7}
    >
      <View style={styles.buttonContent}>
        <Text style={styles.buttonTitle}>{title}</Text>
        <Text style={styles.buttonDescription}>{description}</Text>
      </View>
      <Text style={styles.buttonArrow}>→</Text>
    </TouchableOpacity>
  );

  // ==================== 主渲染 ====================
  
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        {/* 标题 */}
        <View style={styles.header}>
          <Text style={styles.title}>🎭 底部动画模态框</Text>
          <Text style={styles.subtitle}>
            演示从底部弹出的模态框组件
          </Text>
        </View>

        {/* 选中项显示 */}
        {selectedItem ? (
          <View style={styles.selectedItemContainer}>
            <Text style={styles.selectedItemText}>
              已选择: {selectedItem}
            </Text>
          </View>
        ) : null}

        {/* 演示按钮列表 */}
        <View style={styles.demoSection}>
          <Text style={styles.sectionTitle}>📱 演示场景</Text>

          {renderButton(
            '1️⃣ 基础模态框',
            'basic',
            '简单的内容展示，支持点击遮罩和下滑关闭',
          )}

          {renderButton(
            '2️⃣ 表单模态框',
            'form',
            '带输入框的表单，自动聚焦输入框',
          )}

          {renderButton(
            '3️⃣ 列表选择器',
            'list',
            '可滚动的选项列表，选择后自动关闭',
          )}

          {renderButton(
            '4️⃣ 自定义样式',
            'custom',
            '自定义动画时长和样式效果',
          )}

          {renderButton(
            '5️⃣ 禁用手势',
            'noGesture',
            '禁用点击遮罩和下滑手势，只能通过按钮关闭',
          )}

          {renderButton(
            '6️⃣ 使用 ref 控制模态框',
            'refControl',
            '使用 ref 控制模态框的显示和隐藏',
          )}
        </View>

        {/* 技术说明 */}
        <View style={styles.infoSection}>
          <Text style={styles.infoTitle}>✨ 技术特性</Text>
          <Text style={styles.infoText}>• 从底部滑入/滑出动画</Text>
          <Text style={styles.infoText}>• 高度由子组件自动决定</Text>
          <Text style={styles.infoText}>• 支持点击遮罩层关闭</Text>
          <Text style={styles.infoText}>• 支持向下滑动手势关闭</Text>
          <Text style={styles.infoText}>• 可自定义动画时长和样式</Text>
          <Text style={styles.infoText}>• 完整的 TypeScript 类型支持</Text>
        </View>
      </ScrollView>

      {/* ==================== 模态框组件 ==================== */}

      {/* 1. 基础模态框 */}
      <AnimatedBottomModal
        visible={activeModal === 'basic'}
        onClose={closeModal}
      >
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>👋 欢迎使用</Text>
          <Text style={styles.modalText}>
            这是一个从底部弹出的模态框组件。
          </Text>
          <Text style={styles.modalText}>
            你可以点击外部遮罩层或向下滑动来关闭它。
          </Text>
          <TouchableOpacity
            style={styles.modalButton}
            onPress={closeModal}
          >
            <Text style={styles.modalButtonText}>知道了</Text>
          </TouchableOpacity>
        </View>
      </AnimatedBottomModal>

      {/* 2. 表单模态框 */}
      <AnimatedBottomModal
        visible={activeModal === 'form'}
        onClose={closeModal}
      >
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>📝 输入信息</Text>
          <TextInput
            style={styles.input}
            placeholder="请输入内容..."
            value={formText}
            onChangeText={setFormText}
            multiline
            autoFocus
          />
          <View style={styles.buttonRow}>
            <TouchableOpacity
              style={[styles.modalButton, styles.cancelButton]}
              onPress={closeModal}
            >
              <Text style={styles.cancelButtonText}>取消</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.modalButton, styles.submitButton]}
              onPress={handleFormSubmit}
            >
              <Text style={styles.modalButtonText}>提交</Text>
            </TouchableOpacity>
          </View>
        </View>
      </AnimatedBottomModal>

      {/* 3. 列表选择器 */}
      <AnimatedBottomModal
        visible={activeModal === 'list'}
        onClose={closeModal}
      >
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>📋 选择操作</Text>
          <ScrollView style={styles.listContainer}>
            {listItems.map((item) => (
              <TouchableOpacity
                key={item.id}
                style={styles.listItem}
                onPress={() => handleItemSelect(item)}
                activeOpacity={0.7}
              >
                <Text style={styles.listItemIcon}>{item.icon}</Text>
                <Text style={styles.listItemText}>{item.title}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
          <TouchableOpacity
            style={[styles.modalButton, styles.cancelButton]}
            onPress={closeModal}
          >
            <Text style={styles.cancelButtonText}>取消</Text>
          </TouchableOpacity>
        </View>
      </AnimatedBottomModal>

      {/* 4. 自定义样式模态框 */}
      <AnimatedBottomModal
        visible={activeModal === 'custom'}
        onClose={closeModal}
        animationDuration={500}
        containerStyle={styles.customContainer}
        overlayStyle={styles.customOverlay}
        dragIndicatorStyle={styles.customDragIndicator}
      >
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>🎨 自定义样式</Text>
          <Text style={styles.modalText}>
            这个模态框使用了自定义样式：
          </Text>
          <Text style={styles.modalText}>• 动画时长: 500ms</Text>
          <Text style={styles.modalText}>• 自定义背景色</Text>
          <Text style={styles.modalText}>• 自定义拖动条颜色</Text>
          <Text style={styles.modalText}>• 自定义遮罩层透明度</Text>
          <TouchableOpacity
            style={[styles.modalButton, styles.customButton]}
            onPress={closeModal}
          >
            <Text style={styles.modalButtonText}>关闭</Text>
          </TouchableOpacity>
        </View>
      </AnimatedBottomModal>

      {/* 5. 禁用手势模态框 */}
      <AnimatedBottomModal
        visible={activeModal === 'noGesture'}
        onClose={closeModal}
        closeOnOverlayTap={false}
        closeOnSwipeDown={false}
        showDragIndicator={false}
      >
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>⚠️ 重要提示</Text>
          <Text style={styles.modalText}>
            这个模态框禁用了手势关闭功能。
          </Text>
          <Text style={styles.modalText}>
            你不能通过点击外部或下滑来关闭它，只能点击下面的按钮。
          </Text>
          <TouchableOpacity
            style={[styles.modalButton, styles.warningButton]}
            onPress={closeModal}
          >
            <Text style={styles.modalButtonText}>我知道了</Text>
          </TouchableOpacity>
        </View>
      </AnimatedBottomModal>

      {/* 6. 使用 ref 控制模态框 */}
      <AnimatedBottomModal
        ref={modalRef}
        onClose={closeModal}
      >
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>⚠️ 重要提示</Text>
          <Text style={styles.modalText}>
            这个模态框禁用了手势关闭功能。
          </Text>
          <Text style={styles.modalText}>
            你不能通过点击外部或下滑来关闭它，只能点击下面的按钮。
          </Text>
          <TouchableOpacity
            style={[styles.modalButton, styles.warningButton]}
            onPress={closeModal}
          >
            <Text style={styles.modalButtonText}>我知道了</Text>
          </TouchableOpacity>
        </View>
      </AnimatedBottomModal>
    </SafeAreaView>
  );
};

// ==================== 样式定义 ====================

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F7FA',
  },
  scrollContent: {
    padding: 20,
  },
  header: {
    marginBottom: 24,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#1A1A1A',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666666',
    lineHeight: 22,
  },
  selectedItemContainer: {
    backgroundColor: '#E8F5E9',
    padding: 16,
    borderRadius: 12,
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#4CAF50',
  },
  selectedItemText: {
    fontSize: 16,
    color: '#2E7D32',
    fontWeight: '600',
  },
  demoSection: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#1A1A1A',
    marginBottom: 16,
  },
  demoButton: {
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    // iOS 阴影
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    // Android 阴影
    elevation: 2,
  },
  buttonContent: {
    flex: 1,
  },
  buttonTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1A1A1A',
    marginBottom: 4,
  },
  buttonDescription: {
    fontSize: 14,
    color: '#666666',
    lineHeight: 20,
  },
  buttonArrow: {
    fontSize: 24,
    color: '#007AFF',
    marginLeft: 12,
  },
  infoSection: {
    backgroundColor: '#E3F2FD',
    padding: 16,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#2196F3',
  },
  infoTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1565C0',
    marginBottom: 12,
  },
  infoText: {
    fontSize: 14,
    color: '#1976D2',
    lineHeight: 24,
  },
  
  // ==================== 模态框内容样式 ====================
  
  modalContent: {
    padding: 20,
  },
  modalTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1A1A1A',
    marginBottom: 16,
  },
  modalText: {
    fontSize: 16,
    color: '#666666',
    lineHeight: 24,
    marginBottom: 12,
  },
  modalButton: {
    backgroundColor: '#007AFF',
    padding: 16,
    borderRadius: 12,
    alignItems: 'center',
    marginTop: 8,
  },
  modalButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#FFFFFF',
  },
  
  // ==================== 表单样式 ====================
  
  input: {
    borderWidth: 1,
    borderColor: '#DDDDDD',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    minHeight: 100,
    textAlignVertical: 'top',
    marginBottom: 16,
  },
  buttonRow: {
    flexDirection: 'row',
    gap: 12,
  },
  cancelButton: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  cancelButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#666666',
  },
  submitButton: {
    flex: 1,
  },
  
  // ==================== 列表样式 ====================
  
  listContainer: {
    maxHeight: 300,
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  listItemIcon: {
    fontSize: 24,
    marginRight: 16,
  },
  listItemText: {
    fontSize: 16,
    color: '#1A1A1A',
  },
  
  // ==================== 自定义样式 ====================
  
  customContainer: {
    backgroundColor: '#FFF3E0',
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
  customOverlay: {
    backgroundColor: 'rgba(255, 152, 0, 0.3)',
  },
  customDragIndicator: {
    backgroundColor: '#FF9800',
    width: 60,
    height: 5,
  },
  customButton: {
    backgroundColor: '#FF9800',
  },
  
  // ==================== 警告样式 ====================
  
  warningButton: {
    backgroundColor: '#F44336',
  },
});

